<template>
    <div class="researchGroup">
        <!-- 教研下教研组 -->
        <div class="head">
            <div class="satic-area">
                <div class="dynamic-area1"></div>
                <div class="dynamic-area2"></div>
            </div>
            <div class="groupDetail">
                <div class="cover">
                    <el-image :src="group.cover | pictureUrl"></el-image>
                </div>
                <div class="detail">
                    <h2>{{group.title}}</h2>
                    <div class="company">
                        <label>所属教研：{{otherUserInfo.name ||otherUserInfo.username}}</label>
                    </div>
                    <div class="count">
                        <label>教研组活动：{{group.activitnum}}</label>
                        <label>教研组成果：{{group.resultnum}}</label>
                        <!-- <label>教研组资源：{{group.resourcenum}}</label> -->
                    </div>
                </div>
            </div>
        </div>
        <div class="groupNav" v-if="!isShowManagement">
            <div class="nav">
                <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                    :router="true">
                    <el-menu-item index="/research/researchOther">教研首页</el-menu-item>
                    <el-menu-item index="researchGroupHome">教研组首页</el-menu-item>
                    <el-menu-item index="researchGroupAlbum">教研组相册</el-menu-item>
                    <el-menu-item index="researchGroupActivity">教研组活动</el-menu-item>
                    <el-menu-item index="researchGroupIevements">教研组成果</el-menu-item>
                    <el-menu-item index="researchGroupResources">教研组资源</el-menu-item>
                </el-menu>
            </div>
        </div>

        <div class="groupMain" v-if="!isShowManagement">
            <router-view />
        </div>
        <div class="groupMain" v-if="isShowManagement">
            <ManagementList :menuTabList='menuTabList' :activeMenuIndex='activeMenuIndex'></ManagementList>
        </div>
    </div>
</template>

<script>
    import {
        mapState
    } from 'vuex'
    import ManagementList from "@c/managementList/researchManagementList"
    export default {
        components: {
            ManagementList
        },
        watch:{
            $route:{
                 handler(val){
                     if(val.query.routePath){
                         this.activeIndex = val.query.routePath
                     }else{
                        this.activeIndex = this.getCaption(val.path) 
                     }
                 },
                 deep :true
             },
        },
        computed: {
            ...mapState({
                isShowManagement: state => state.commonModule.isShowManagement,
                userInfo: state => state.userModule.userInfo,
                otherUserInfo: state => state.userModule.otherUserInfo,
                group: state => state.researchModule.group,
                
            })
        },
        created() {
            // console.log(this.otherUserInfo)
            if (this.group && this.userInfo.id) {
                if(this.userInfo.role_id == 100011 && this.userInfo.xxdm == this.group.organizationId){
                    this.$store.commit('commonModule/INIT_ISMANAGER', true);
                }else{
                    this.getMember()
                }
            }
            this.menuTab(5)
            this.activityPage(0)
            this.researchGain()
        },
        data() {
            return {
                menuTabList: {},
                activeMenuIndex: 'group',
                src: require('../../../assets/img/headportrait03.jpg'),
                activeIndex: 'researchGroupHome'
            }
        },
        methods: {
            activityPage(params){
                this.$store.dispatch('researchModule/activityPage', {
                    dictype: params,
                    groupId: this.group.id,
                    organizationId: this.otherUserInfo.xxdm,
                    limit: 2,
                    page: 1,
                }).then(res =>{
                    if(res){
                        this.group.activitnum = res.total
                    }
                })
            },
            researchGain(){
                this.$store.dispatch('articleModule/schoolArticleList',{
                    schoolid: this.otherUserInfo.xxdm,
                    // classifyid: this.group.id,
                    groupId:this.group.id,
                    dictype: '98',
                    draft: 1,
                    limit: 1,
                    page: 1,
                    search: null,
                    sortType: 0,
                    userid: null,
                    yearandmonth: null
                }).then(res =>{
                    if(res.data.code == 200){
                        this.group.resultnum = res.data.result.total
                    }
                })
            },
            getCaption(obj){
                var index=obj.lastIndexOf("/");
                obj=obj.substring(index+1,obj.length);
                return obj;
            },
            getMember() {
                this.$store.dispatch('researchModule/groupUserPage', {
                    id: this.group.id || null,
                    limit: this.pageSize,
                    page: this.currentPage,
                }).then(res => {
                    var falg = false 
                    if (res && res.total > 0) {
                        // 验证进入者是否具有管理中心权限
                        res.list.map(item => {
                            if (item.userId == this.userInfo.id) {
                                falg = true
                            } else {
                                // this.$store.commit('commonModule/INIT_ISMANAGER', false);
                            }
                        })
                    }
                    this.$store.commit('commonModule/INIT_ISMANAGER', falg);
                })
            },
            handleSelect(key, keyPath) {
            },
            menuTab(params) {
                this.$store.dispatch('commonModule/menuTab', {
                    type: params
                }).then(res => {
                    if (res.data.code = 200) {
                        this.menuTabList = res.data.result
                    }
                })
            },
        }
    }
</script>

<style lang="scss" scoped>
    .researchGroup {
        width: 100%;

        .head {
            width: 100%;
            height: 360px;
            overflow: hidden;
            position: relative;

            .satic-area {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: url('../../../assets/img/poster-about.jpg') no-repeat center;
                background-size: 100% 100%;

                .dynamic-area1 {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background: url('../../../assets/img/poster-drop-animate2.png') repeat-x 4000px 0px;
                    background-size: cover;
                    animation: posterDrop1 3000s linear infinite;
                }

                @keyframes posterDrop1 {
                    from {
                        background-position: 1000px 0;
                    }

                    to {
                        background-position: 0 0;
                    }
                }

                .dynamic-area2 {
                    position: absolute;
                    width: 100%;
                    height: 100%;
                    top: 0;
                    left: 0;
                    background: url('../../../assets/img/poster-drop-animate1.png') repeat-x 30000px 0px;
                    background-size: cover;
                    animation: posterDrop2 2000s linear infinite;
                }

                @keyframes posterDrop2 {
                    from {
                        background-position: 30000px 0;
                    }

                    to {
                        background-position: 0 0;
                    }
                }
            }

            .groupDetail {
                position: absolute;
                left: 50%;
                bottom: 30px;
                z-index: 29;
                transform: translateX(-50%);
                width: 81%;
                height: 210px;

                .cover {
                    width: 210px;
                    height: 210px;
                    float: left;
                    box-sizing: border-box;
                    padding: 8px;
                    border: 1px solid #DCDFE6;
                }

                .detail {
                    float: left;
                    text-align: left;
                    margin-left: 20px;

                    .company {
                        margin-bottom: 20px;
                        font-weight: bold;
                        color: #303133;
                    }

                    .count {
                        color: #909399;

                        label:nth-child(2) {
                            margin: 0 20px;
                        }
                    }
                }

            }
        }

        .groupNav {
            background-color: white;

            .nav {
                width: 81%;
                margin: 0 auto;
            }
        }

        .groupMain {
            width: 100%;
        }
    }
</style>